<template>
  <div class="search-box">
    <div class="search-box-main flex-box">
      <input type="text" id="search-main" placeholder="输入问题搜索">
      <button id="search-icon">搜索</button>
    </div>
  </div>
</template>
<script>
// @ is an alias to /src
export default {
  data() {
    return {
      list: ''
    }
  },
  name: 'needs',
  components: {},
  computed: {},
  methods: {},
  created() {},
  mounted() {}
}
</script>
<style lang="scss" scoped>
.search-box {
  width: 100%;
  height: r(50);
  background: #f7f7f7;
  border-top: 1px solid #eee;
  .search-box-main {
    width: 100%;
    height: 100%;
    margin: 0 auto;
    padding-left: r(15);
    padding-right: r(15);
    box-sizing: border-box;
    input {
      width: 100%;
      height: 30px;
      border: 1px solid #eee;
      border-radius: 100px;
      margin: 0;
      padding-left: 10px;
      padding-right: 10px;
      font-size: r(14);
      color: #ccc;
      float: left;
      transition: 0.25s ease;
      -webkit-transition: 0.25s ease;
    }
    button {
      width: 0;
      background: none;
      border: none;
      padding: 0;
      overflow: hidden;
      font-size: r(16);
      color: #6dbbfe;
      transition: 0.25s ease;
      -webkit-transition: 0.25s ease;
    }
  }
  .search-lists {
    max-width: 750px;
    margin: 0 auto;
    padding-left: r(15);
    padding-right: r(15);
    box-sizing: border-box;
    h4 {
      font-size: r(12);
      color: #999999;
      margin-top: r(10);
      line-height: r(36);
      border-bottom: 1px solid #eee;
    }
    ul.list-icon {
      li {
        float: left;
        @include setPm(padding, 7, 20, 7, 20);
        border: 1px solid #ccc;
        border-radius: 40px;
        margin-right: r(13);
        margin-top: r(15);
        font-size: r(14);
        color: #666666;
      }
    }
    ul.list-line {
      width: 100%;
      padding-top: r(10);
      overflow: hidden;
      li {
        width: 100%;
        float: left;
        line-height: r(48);
        border-bottom: 1px solid #eee;
        span {
          float: left;
          color: #bbb;
          font-size: r(18);
        }
        p {
          float: left;
          font-size: r(14);
          color: #666666;
          margin-left: r(10);
        }
        button {
          float: right;
          border: none;
          outline: none;
          font-size: r(18);
          color: #bbb;
          margin-top: r(6);
        }
      }
    }
  }
}
</style>
